<!doctype html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>






<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
    
  
  <link href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/lh706.github.io/css/main.css?v=5.1.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="JavaScript,总结,读书," />








  <link rel="shortcut icon" type="image/x-icon" href="/lh706.github.io/favicon.ico?v=5.1.1" />






<meta name="description" content="认识jquery $对象与dom对象  jq对象是数组对象(选择的元素可以不用遍历就可以操作);使用$()制作jq对象;jq转DOM–&amp;gt; var $x=$(&amp;#39;x&amp;#39;) var x=$x[0]或者 var x=$x.get(0);DOM转jq–&amp;gt; var x=document.getElementId(&amp;#39;id&amp;#39;); var $x=$(x);">
<meta name="keywords" content="JavaScript,总结,读书">
<meta property="og:type" content="article">
<meta property="og:title" content="锋利的jquery">
<meta property="og:url" content="https://lh706.github.io/lh706.github.io/2017/05/20/锋利的jquery/index.html">
<meta property="og:site_name" content="Albert的blog">
<meta property="og:description" content="认识jquery $对象与dom对象  jq对象是数组对象(选择的元素可以不用遍历就可以操作);使用$()制作jq对象;jq转DOM–&amp;gt; var $x=$(&amp;#39;x&amp;#39;) var x=$x[0]或者 var x=$x.get(0);DOM转jq–&amp;gt; var x=document.getElementId(&amp;#39;id&amp;#39;); var $x=$(x);">
<meta property="og:updated_time" content="2017-05-20T06:53:04.312Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="锋利的jquery">
<meta name="twitter:description" content="认识jquery $对象与dom对象  jq对象是数组对象(选择的元素可以不用遍历就可以操作);使用$()制作jq对象;jq转DOM–&amp;gt; var $x=$(&amp;#39;x&amp;#39;) var x=$x[0]或者 var x=$x.get(0);DOM转jq–&amp;gt; var x=document.getElementId(&amp;#39;id&amp;#39;); var $x=$(x);">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/lh706.github.io/',
    scheme: 'Mist',
    sidebar: {"position":"right","display":"always","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://lh706.github.io/lh706.github.io/2017/05/20/锋利的jquery/"/>





  <title>锋利的jquery | Albert的blog</title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  














  
  
    
  

  <div class="container sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/lh706.github.io/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Albert的blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/lh706.github.io/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/lh706.github.io/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/lh706.github.io/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-tags " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://lh706.github.io/lh706.github.io/lh706.github.io/2017/05/20/锋利的jquery/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Albert">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/lh706.github.io/my.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Albert的blog">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">锋利的jquery</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-05-20T14:28:51+08:00">
                2017-05-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="认识jquery"><a href="#认识jquery" class="headerlink" title="认识jquery"></a>认识jquery</h2><ul>
<li>$对象与dom对象</li>
</ul>
<p>jq对象是数组对象(选择的元素可以不用遍历就可以操作);<br>使用$()制作jq对象;<br>jq转DOM–&gt; <code>var $x=$(&#39;x&#39;) var x=$x[0]或者 var x=$x.get(0);</code><br>DOM转jq–&gt; <code>var x=document.getElementId(&#39;id&#39;); var $x=$(x);</code><br><a id="more"></a></p>
<ul>
<li>与其他库的冲突</li>
</ul>
<p><code>$.noConflict()</code>将$放弃 然后其他库就可以使用<br>如果要继续使用,可以 <code>jQuery(function($)){};</code>在其中使用;<br>或者 <code>var jq=$.noConflict();</code>使用其他别名代替;</p>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><p>jq选择选择生成的是对象,即使目标不存在,也不会报错;<br>原生的会返回null;<br>所以判断是否选择目标存在,用<code>if($x[0])--返回undefined)或者if($x.length-返回0)</code>来判断;</p>
<h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">id    &apos;#id&apos;</div><div class="line">类    &apos;.class&apos;</div><div class="line">元素    &apos;element&apos;</div><div class="line">群组    &apos;element,#id&apos;</div></pre></td></tr></table></figure>
<h3 id="层级"><a href="#层级" class="headerlink" title="层级"></a>层级</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">后代    &apos;a b&apos;</div><div class="line">直系后代    &apos;a&gt;b&apos;</div><div class="line">a之后的兄弟中第一个为xx的元素    &apos;a+xx&apos;</div><div class="line">a之后的所有为xx的兄弟元素     &apos; a~b&apos;</div></pre></td></tr></table></figure>
<h3 id="基本过滤"><a href="#基本过滤" class="headerlink" title="基本过滤"></a>基本过滤</h3><p>选择一个群组,然后用:后面的过滤<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">:first </div><div class="line">:last</div><div class="line">:not(xx)    群组中剔除xx的  xx不用引号</div><div class="line">:even       群组中索引为偶数的</div><div class="line">:odd        群组中索引为奇数的</div><div class="line">:eq(x) </div><div class="line">:gt(x)      索引大于x的</div><div class="line">:lt(x)      索引小于x的</div></pre></td></tr></table></figure></p>
<h3 id="内容过滤"><a href="#内容过滤" class="headerlink" title="内容过滤"></a>内容过滤</h3><p>元素内部包含的-子元素或文本<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">:contains(text) 包含文本为text的 (子元素中包含)(包含,不是匹配)</div><div class="line">:empty      为空的</div><div class="line">:parent     有子元素(包括文本) 不为空放</div><div class="line">:has(x)     拥有x的</div></pre></td></tr></table></figure></p>
<h3 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">:hidden</div><div class="line">:visible</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">[attr]               选择带有attr属性的元素  eg:[id]</div><div class="line">[attr=value]        匹配</div><div class="line">[attr!=value]       不匹配</div><div class="line">[attr^=value]       开始</div><div class="line">[attr$=value]       结束</div><div class="line">[attr*=value]       包含</div><div class="line">[][]                复合过滤</div></pre></td></tr></table></figure>
<h3 id="层级-1"><a href="#层级-1" class="headerlink" title="层级"></a>层级</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line">:first-child Selector</div><div class="line">选择所有父级元素下的第一个子元素。</div><div class="line"></div><div class="line">:first-of-type Selector</div><div class="line">选择所有相同的元素名称的第一个兄弟元素。</div><div class="line"></div><div class="line">:last-child Selector</div><div class="line">选择所有父级元素下的最后一个子元素。</div><div class="line"></div><div class="line">:last-of-type Selector</div><div class="line">选择的所有元素之间具有相同元素名称的最后一个兄弟元素。</div><div class="line"></div><div class="line">:nth-child() Selector</div><div class="line">选择的他们所有父元素的第n个子元素。</div><div class="line"></div><div class="line">:nth-last-child() Selector</div><div class="line">选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。</div><div class="line"></div><div class="line">:nth-last-of-type() Selector</div><div class="line">选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。</div><div class="line"></div><div class="line">:nth-of-type() Selector</div><div class="line">选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。（感谢@caikan提供的翻译）</div><div class="line"></div><div class="line">:only-child Selector</div><div class="line">如果某个元素是其父元素的唯一子元素，那么它就会被选中。</div><div class="line"></div><div class="line">:only-of-type Selector</div><div class="line">选择所有没有兄弟元素，且具有相同的元素名称的元素。</div></pre></td></tr></table></figure>
<h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">:enable</div><div class="line">:disable</div><div class="line">:checked    单选,复选被选中的</div><div class="line">:selected   被选中的选项元素</div><div class="line"></div><div class="line">:input</div><div class="line">:text</div><div class="line">:password</div><div class="line">:radio</div><div class="line">:checkbox</div><div class="line">:submit</div><div class="line">:image</div><div class="line">:reset</div><div class="line">:button</div><div class="line">:file</div></pre></td></tr></table></figure>
<h3 id="DOM操作"><a href="#DOM操作" class="headerlink" title="DOM操作"></a>DOM操作</h3><ul>
<li>DOM属性-标签内的属性操作</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line">类</div><div class="line">1.addClass</div><div class="line">2.toggleClass</div><div class="line">3.hasClass</div><div class="line">4.removeClass</div><div class="line">5.css</div><div class="line">属性</div><div class="line">1.attr</div><div class="line">2.prop</div><div class="line">3.removeAttr</div><div class="line">4.removeProp</div><div class="line">基本属性</div><div class="line">1.html</div><div class="line">2.val</div><div class="line">3.text</div><div class="line">高宽</div><div class="line">1.height</div><div class="line">2.innerHeight---不计算border</div><div class="line">3.width</div><div class="line">4.innerWidth</div><div class="line">5.outerHeigth---包括border,参数true设置是否包括margin</div><div class="line">6.outerWidth</div><div class="line">坐标类</div><div class="line">1.offset---元素相对于文档的坐标</div><div class="line">2.position</div><div class="line">3.scrollTop</div><div class="line">4.scrollLeft--当前元素的滚动条的坐标(需要此元素能滚动,如body)</div></pre></td></tr></table></figure>
<p>1.<code>attr</code>和<code>prop</code>的分别—对于固有属性-使用<code>prop</code>,对于自定义的属性–使用<code>attr</code>;(实际中需要验证)<br>2.<code>visible=hidden</code>和<code>display:none</code>是不同的–第一种是在页面隐藏,第二种是在页面不存在(无高宽之类属性)</p>
<p>属性操作有三个不同的用法<br>1.得到值  <code>$(xx).html()</code><br>2.直接设置值    <code>$(xx).html(&lt;br&gt;)</code><br>3.通过函数返回值设置    <code>$(xx).attr(function(){ })</code><br>4.注意这些的返回值<br>5.js定时器setInterval()与setTimeout()<br>6.注意回调函数中this所指的对象</p>
<h3 id="DOM元素操作"><a href="#DOM元素操作" class="headerlink" title="DOM元素操作"></a>DOM元素操作</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">1.外部</div><div class="line">wrap</div><div class="line">wrapAll</div><div class="line">unwrap---删除所有包裹它的元素</div><div class="line">wrapInner---将直接子元素外部包裹</div><div class="line">2.同级</div><div class="line">after---后面插入元素-作为兄弟节点,相当于移动</div><div class="line">before</div><div class="line">insertAfter</div><div class="line">insertBefore</div><div class="line">3.内部</div><div class="line">append--每个匹配元素里面的末尾插入</div><div class="line">appendTo</div><div class="line">prepend---每个匹配元素内部头部插入</div><div class="line">prependTo</div><div class="line">4.其他</div><div class="line">clone---克隆</div><div class="line">detach---移除(不包括元素的事件和数据)(仿佛没差别!!)</div><div class="line">empty---移除子元素</div><div class="line">remove---移除一切</div><div class="line">replaceAll--替换</div><div class="line">replaceWith--替换</div></pre></td></tr></table></figure>
<p>1.插入操作中 <code>insert</code>和<code>TO</code>都只是改变插入被插入的语句顺序<br>2.<code>xx</code>和<code>xxAll</code>,一个匹配第一个元素,一个匹配所有元素</p>
<h3 id="遍历"><a href="#遍历" class="headerlink" title="遍历"></a>遍历</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line">add---添加进被选中的集合中(<span class="string">`$('p').add('a').css()`</span> 设置p和a的css值 )</div><div class="line">addBack---</div><div class="line">    jq中,选择,过滤产生的集合放在一个堆栈中,addBack用于返回前一个集合,</div><div class="line">    $(<span class="string">'.b&gt;.b'</span>).siblings().find(<span class="string">'.a1'</span>).addBack().css()中-有三个集合,</div><div class="line">    <span class="string">'.b&gt;.b'</span> /其兄弟元素/其兄弟元素中为a1的---addBack返回倒数第二匹配的,和最后匹配的组合成新集合</div><div class="line">end---退回上一个堆栈状态,返回的是倒数第二选择的对象</div><div class="line"></div><div class="line">后代选择:</div><div class="line">children---直接子元素</div><div class="line">contents---直接子元素,包括文本节点</div><div class="line">filter---过滤filter(<span class="string">':even'</span>)</div><div class="line">find---选择</div><div class="line">has</div><div class="line">is--- eg:is(<span class="string">'li'</span>) is(<span class="string">':visible'</span>) 返回布尔值 </div><div class="line">not---从集合中移除匹配的元素</div><div class="line"></div><div class="line">父元素</div><div class="line">closest---向上匹配,直到找到,返回一个或<span class="number">0</span>个</div><div class="line">parents---向上匹配,直到根元素,可以返回多个</div><div class="line">parent</div><div class="line">parentsUnitil</div><div class="line"></div><div class="line">同级</div><div class="line">first</div><div class="line">last</div><div class="line">next</div><div class="line">nextAll</div><div class="line">nextUnitl</div><div class="line">prev</div><div class="line">prevAll</div><div class="line">prevUnitil</div><div class="line">siblings</div><div class="line"></div><div class="line"></div><div class="line">each---遍历一个jquery对象</div><div class="line">map---</div><div class="line">    map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。</div><div class="line">    each()返回的是原来的数组，并不会新创建一个数组。</div><div class="line">    map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。</div><div class="line">    </div><div class="line">eq---通过-index,可以倒数开始</div><div class="line">slice--通过下标范围来选择元素</div></pre></td></tr></table></figure>
<blockquote>
<p>parent,parents,closest,has区别<br>filter和find区别<br>map,each区别</p>
</blockquote>
<h3 id="css-事件和特效"><a href="#css-事件和特效" class="headerlink" title="css,事件和特效"></a>css,事件和特效</h3><ul>
<li>事件处理器</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div></pre></td><td class="code"><pre><div class="line">绑定事件</div><div class="line">通过bind on one </div><div class="line">bind(event [,date],fn)</div><div class="line">event--事件名称-- 任何的 如 click() focus() load--下方的事件 都是这种的简写</div><div class="line">自定义事件--通过trigger触发</div><div class="line">自定义命名空间的事件--<span class="string">'event.xx'</span></div><div class="line">event.type可以判断类型;</div><div class="line">one()---一次性的事件;</div><div class="line">on和bind基本一致,最好使用on和off代替bind与unbind</div><div class="line">************************************************</div><div class="line"></div><div class="line">模拟操作</div><div class="line">trigger--执行事件</div><div class="line">不需要用户触发直接执行,可以用</div><div class="line">$(<span class="string">'xx'</span>).bind(<span class="string">'myclick'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event,x1,x2</span>)</span>&#123; &#125;)</div><div class="line">$(<span class="string">'xx'</span>).trigger(<span class="string">'myclick'</span>,[<span class="string">'x1'</span>,<span class="string">'x2'</span>]);</div><div class="line">$(<span class="string">'xx'</span>).click();</div><div class="line">$(<span class="string">'xx'</span>).triggerHandler(<span class="string">'click'</span>)--执行绑定的事件,取消默认事件</div><div class="line">执行自定义的事件,只能使用trigger</div><div class="line"></div><div class="line">************************************************</div><div class="line"></div><div class="line">移除事件:</div><div class="line"><span class="number">1.</span>事件冒泡---一个动作触发子元素和父元素的事件-由里向外冒泡进行;</div><div class="line"><span class="number">2.</span>移除绑定事件-停止冒泡:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;;event.stopPropagation()&#125;;</div><div class="line"><span class="number">3.</span>移除默认事件,如:当表单内文字长度不够,让submit本身的事件移除,不提交.event.preventDefault();</div><div class="line"><span class="number">4.</span><span class="keyword">return</span> <span class="literal">false</span>;将移除所有事件;</div><div class="line"><span class="number">5.</span>unbind()</div><div class="line">$(<span class="string">'a'</span>).bind(<span class="string">'click.xx'</span>,f1=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;)</div><div class="line">$(<span class="string">'a'</span>).unbind(<span class="string">'click'</span>,f1/<span class="string">'.xx'</span>)--通过定义变量或命名空间</div><div class="line">$(<span class="string">'a'</span>).bind(<span class="string">'click'</span>,f1)</div><div class="line">再次添加(只有通过变量名添加,命名空间不能添加),事件会被排到事件列的最后</div><div class="line"></div><div class="line">************************************************</div><div class="line"></div><div class="line">事件对象的属性</div><div class="line">type</div><div class="line">stopPropagation()</div><div class="line">preventDefault()</div><div class="line">target--</div><div class="line">target获取当前触发的DOM元素,通过$()可转换成$(<span class="keyword">this</span>);</div><div class="line">pageX/Y</div><div class="line">which--获取鼠标按钮(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</div></pre></td></tr></table></figure>
<h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">浏览器事件</div><div class="line">error---$(<span class="string">'#img'</span>).error(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;$(<span class="keyword">this</span>).hide();&#125;)</div><div class="line">resize---只用于窗口大小? $(<span class="built_in">window</span>)</div><div class="line">scroll---在元素内滚动触发</div><div class="line"></div><div class="line">鼠标事件</div><div class="line">mouse--enter/over/down/up/move/out/leave</div><div class="line">click,dbclick,hover</div><div class="line"></div><div class="line">键盘--<span class="built_in">window</span>和<span class="built_in">document</span>是全屏,除此,需要有输入的才能触发</div><div class="line">keydown</div><div class="line">keyup</div><div class="line">keypree</div><div class="line"></div><div class="line">文档加载事件</div><div class="line">ready</div></pre></td></tr></table></figure>
<h3 id="特效"><a href="#特效" class="headerlink" title="特效"></a>特效</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line">animate</div><div class="line">hide</div><div class="line">show</div><div class="line">toggle</div><div class="line">slideDown</div><div class="line">slideUp</div><div class="line">slideToggle</div><div class="line">fadeIn</div><div class="line">fadeOut</div><div class="line">fadeTo</div><div class="line">fadeToggle</div><div class="line"></div><div class="line">animate(&#123;</div><div class="line">    <span class="attr">width</span>: [<span class="string">'toggle'</span>, <span class="string">'swing'</span>],</div><div class="line">    <span class="attr">opacity</span>: <span class="string">'toggle'</span></div><div class="line">  &#125;, <span class="number">5000</span>, <span class="string">'linear'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; &#125;);</div><div class="line">  animate(&#123;属性变化&#125;,时间,缓动函数,fn)</div><div class="line">  jq自带两个缓动函数 swing和linear.</div><div class="line">  toggle可以作为值.</div><div class="line">  </div><div class="line">delay--延迟</div><div class="line">finish--结束</div><div class="line">stop--停止队列--(停止队列,停止当前动画)</div><div class="line"></div><div class="line">$(a).animate(动作<span class="number">1</span>);</div><div class="line">$(a).animate(动作<span class="number">2</span>);</div><div class="line">执行一次,stop(<span class="literal">false</span>,<span class="literal">true</span>)-当前动作<span class="number">1</span>直接完成,动作<span class="number">2</span>继续</div><div class="line">stop(<span class="literal">true</span>,<span class="literal">false</span>)-当前动作停止,队列动作不进行</div><div class="line">finish().动作全部直接完成.</div><div class="line"></div><div class="line">jQuery.fx.interval=数字</div><div class="line">动画的帧数--全局性的,无动画时才能更改</div></pre></td></tr></table></figure>
<h3 id="表单表格与其他操作"><a href="#表单表格与其他操作" class="headerlink" title="表单表格与其他操作"></a>表单表格与其他操作</h3><ul>
<li>表单</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">事件</div><div class="line">blur--失去焦点</div><div class="line">focus</div><div class="line">focusin--支持冒泡事件的focus--会去检测子元素</div><div class="line">focusout---冒泡的blur</div><div class="line">change--value值改变(!!表单元素触发事件的快慢不同)</div><div class="line">select--input&gt;type=text和textarea的文本被选择时触发</div><div class="line">submit-只能绑定from,另外要注意enter键</div></pre></td></tr></table></figure>
<ul>
<li>其他</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">data--在对象上以键值对的形式添加额外的数据 $().data(<span class="string">'foo'</span>,<span class="string">'xx'</span>)</div><div class="line">      和获取data-xxx=<span class="string">''</span>中的值;</div><div class="line">removeData</div><div class="line"></div><div class="line">type()</div><div class="line">$.contains(a,b)--检测a是否是b的祖先元素</div><div class="line"></div><div class="line">now()--当前时间戳</div><div class="line"><span class="keyword">var</span> time=<span class="keyword">new</span> <span class="built_in">Date</span>();</div><div class="line"><span class="keyword">var</span> local_time=time.toLocaleString()</div><div class="line"></div><div class="line">$.fn.extend(&#123;</div><div class="line"><span class="attr">xx</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;,</div><div class="line"><span class="attr">xxx</span>: funtion()&#123;&#125;</div><div class="line">&#125;)---将方法添加到jq原型$.fn上.</div><div class="line">可以通过$(<span class="string">''</span>).xx(),或者$.fn.xx;调用.</div><div class="line"></div><div class="line">$.extend</div><div class="line"><span class="number">1.</span>$.extend(&#123;</div><div class="line">深度拷贝,   ---  <span class="literal">true</span>/<span class="literal">false</span>,可以将数组中的页合并,不然只会是拷贝共同存在的和后面的</div><div class="line">&#123;&#125;,         --- 空的对象,第一个元素来接收,但是会将元素改变,所以用空元素</div><div class="line">obj1,       --- 这才是第一个元素,值不会改变</div><div class="line">opj2</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<h2 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h2><ul>
<li>关于选择器的使用</li>
</ul>
<blockquote>
<p>ID&gt;标签&gt;class&gt;:xxx<br>尽量用ID确认最近的元素,然后在find();</p>
</blockquote>
<ul>
<li><p>当某个元素调用多次–避免相同选择器的使用</p>
<blockquote>
<p>转换为变量<br>尽量使用链式操作<br>当在别的函数中也要调用时-window.$xx={};将它设置为全局变量</p>
</blockquote>
</li>
<li><p>循环时减少选择器,DOM操作</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">ul插入多个标签,每个里面的字符串放在数组中</div><div class="line">var $list=[...];</div><div class="line">for(var i=0,l=$list.length;i&lt;l;i++)&#123;</div><div class="line">$(&apos;ul&apos;).append(&quot;&lt;li&gt;&quot;+$list[i]+&quot;&lt;/li&gt;&quot;);</div><div class="line">&#125;</div><div class="line">---每次循环都要选择和DOM操作</div><div class="line">改进: var $list=[...];</div><div class="line">$li=&quot;&quot;;</div><div class="line">for(var i=0 ,l=$list.length;i&lt;l;i++)&#123;</div><div class="line">$li+=&quot;&lt;li&gt;&quot;+$list[i]+&quot;&lt;/li&gt;&quot;;</div><div class="line">&#125;</div><div class="line">$(&quot;ul&quot;).html($li);</div></pre></td></tr></table></figure>
</li>
</ul>
<p>//## 其他类<br>//### 回调对象<br>//### 数据操作<br>//### 延迟对象<br>//### 工具类</p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/lh706.github.io/tags/JavaScript/" rel="tag"># JavaScript</a>
          
            <a href="/lh706.github.io/tags/总结/" rel="tag"># 总结</a>
          
            <a href="/lh706.github.io/tags/读书/" rel="tag"># 读书</a>
          
        </div>
      

      
        
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/lh706.github.io/2017/05/20/js设计模式-一/" rel="next" title="js设计模式(一)">
                <i class="fa fa-chevron-left"></i> js设计模式(一)
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/lh706.github.io/2017/05/20/ES5-ES6/" rel="prev" title="ES5,ES6">
                ES5,ES6 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/lh706.github.io/my.jpg"
               alt="Albert" />
          <p class="site-author-name" itemprop="name">Albert</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
           
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/lh706.github.io/archives">
                <span class="site-state-item-count">20</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/lh706.github.io/tags/index.html">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/lh706" target="_blank" title="GitHub">
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/liang-da-shu-shu" target="_blank" title="知乎">
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#认识jquery"><span class="nav-number">1.</span> <span class="nav-text">认识jquery</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#选择器"><span class="nav-number">1.1.</span> <span class="nav-text">选择器</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#基础"><span class="nav-number">2.</span> <span class="nav-text">基础</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#层级"><span class="nav-number">2.1.</span> <span class="nav-text">层级</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#基本过滤"><span class="nav-number">2.2.</span> <span class="nav-text">基本过滤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#内容过滤"><span class="nav-number">2.3.</span> <span class="nav-text">内容过滤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#属性"><span class="nav-number">2.4.</span> <span class="nav-text">属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#层级-1"><span class="nav-number">2.5.</span> <span class="nav-text">层级</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表单"><span class="nav-number">2.6.</span> <span class="nav-text">表单</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM操作"><span class="nav-number">2.7.</span> <span class="nav-text">DOM操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM元素操作"><span class="nav-number">2.8.</span> <span class="nav-text">DOM元素操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#遍历"><span class="nav-number">2.9.</span> <span class="nav-text">遍历</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css-事件和特效"><span class="nav-number">2.10.</span> <span class="nav-text">css,事件和特效</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件"><span class="nav-number">2.11.</span> <span class="nav-text">事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#特效"><span class="nav-number">2.12.</span> <span class="nav-text">特效</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表单表格与其他操作"><span class="nav-number">2.13.</span> <span class="nav-text">表单表格与其他操作</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#性能优化"><span class="nav-number">3.</span> <span class="nav-text">性能优化</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Albert</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>


        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

  
  <script type="text/javascript" src="/lh706.github.io/lib/canvas-nest/canvas-nest.min.js"></script>


  


  <script type="text/javascript" src="/lh706.github.io/js/src/utils.js?v=5.1.1"></script>

  <script type="text/javascript" src="/lh706.github.io/js/src/motion.js?v=5.1.1"></script>



  
  

  
  <script type="text/javascript" src="/lh706.github.io/js/src/scrollspy.js?v=5.1.1"></script>
<script type="text/javascript" src="/lh706.github.io/js/src/post-details.js?v=5.1.1"></script>



  


  <script type="text/javascript" src="/lh706.github.io/js/src/bootstrap.js?v=5.1.1"></script>



  


  




	





  





  





  






  





  

  

  

  

  

</body>
</html>
